<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆API测试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, button {
            padding: 8px 12px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #007bff;
            color: white;
            cursor: pointer;
            border: none;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f8f9fa;
            max-height: 400px;
            overflow-y: auto;
        }
        .error {
            background-color: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
        }
        .success {
            background-color: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }
        .vehicle-card {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>车辆API测试工具</h1>
        
        <div class="form-group">
            <label>管理员登录</label>
            <input type="email" id="email" placeholder="邮箱" value="admin@vehiclesecure.com">
            <input type="password" id="password" placeholder="密码" value="admin123">
            <button onclick="login()">登录</button>
        </div>
        
        <div class="form-group">
            <label>测试车辆API</label>
            <button onclick="getAllVehicles()">获取所有车辆</button>
            <button onclick="getMyVehicles()">获取我的车辆</button>
            <button onclick="searchVehicles()">搜索车辆</button>
            <input type="text" id="searchQuery" placeholder="搜索关键词">
        </div>
        
        <div id="result" class="result" style="display: none;">
            <h3>测试结果</h3>
            <div id="resultContent"></div>
        </div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080/vehicle-secure';
        let authToken = null;

        async function login() {
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            
            try {
                const response = await fetch(`${API_BASE_URL}/api/auth/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ email, password })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    authToken = data.token;
                    showResult('登录成功！Token: ' + authToken.substring(0, 20) + '...', 'success');
                    localStorage.setItem('token', authToken);
                } else {
                    showResult('登录失败: ' + (data.message || '未知错误'), 'error');
                }
            } catch (error) {
                showResult('登录请求失败: ' + error.message, 'error');
            }
        }

        async function getAllVehicles() {
            if (!authToken) {
                authToken = localStorage.getItem('token');
                if (!authToken) {
                    showResult('请先登录获取token', 'error');
                    return;
                }
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/api/vehicles`, {
                    headers: {
                        'Authorization': `Bearer ${authToken}`
                    }
                });
                
                const vehicles = await response.json();
                
                if (response.ok) {
                    displayVehicles(vehicles, '所有车辆列表');
                } else {
                    showResult('获取车辆失败: ' + (vehicles.message || '未知错误'), 'error');
                }
            } catch (error) {
                showResult('请求失败: ' + error.message, 'error');
            }
        }

        async function getMyVehicles() {
            if (!authToken) {
                authToken = localStorage.getItem('token');
                if (!authToken) {
                    showResult('请先登录获取token', 'error');
                    return;
                }
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/api/vehicles/my`, {
                    headers: {
                        'Authorization': `Bearer ${authToken}`
                    }
                });
                
                const vehicles = await response.json();
                
                if (response.ok) {
                    displayVehicles(vehicles, '我的车辆列表');
                } else {
                    showResult('获取我的车辆失败: ' + (vehicles.message || '未知错误'), 'error');
                }
            } catch (error) {
                showResult('请求失败: ' + error.message, 'error');
            }
        }

        async function searchVehicles() {
            if (!authToken) {
                authToken = localStorage.getItem('token');
                if (!authToken) {
                    showResult('请先登录获取token', 'error');
                    return;
                }
            }
            
            const query = document.getElementById('searchQuery').value;
            if (!query.trim()) {
                showResult('请输入搜索关键词', 'error');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/api/vehicles/search?query=${encodeURIComponent(query)}`, {
                    headers: {
                        'Authorization': `Bearer ${authToken}`
                    }
                });
                
                const vehicles = await response.json();
                
                if (response.ok) {
                    displayVehicles(vehicles, `搜索结果: "${query}"`);
                } else {
                    showResult('搜索失败: ' + (vehicles.message || '未知错误'), 'error');
                }
            } catch (error) {
                showResult('请求失败: ' + error.message, 'error');
            }
        }

        function displayVehicles(vehicles, title) {
            let html = `<h4>${title} (${vehicles.length}辆)</h4>`;
            
            if (vehicles.length === 0) {
                html += '<p>没有找到车辆数据</p>';
            } else {
                vehicles.forEach(vehicle => {
                    html += `
                        <div class="vehicle-card">
                            <strong>${vehicle.brand} ${vehicle.model} (${vehicle.year})</strong><br>
                            车牌: ${vehicle.licensePlate || '未知'}<br>
                            VIN: ${vehicle.vin || '未知'}<br>
                            状态: ${vehicle.status || '未知'}<br>
                            燃料类型: ${vehicle.fuelType || '未知'}<br>
                            里程: ${vehicle.mileage || 0}km
                        </div>
                    `;
                });
            }
            
            showResult(html, 'success');
        }

        function showResult(content, type) {
            const resultDiv = document.getElementById('result');
            const resultContent = document.getElementById('resultContent');
            
            resultContent.innerHTML = content;
            resultDiv.className = `result ${type}`;
            resultDiv.style.display = 'block';
        }

        // 页面加载时检查是否有保存的token
        window.onload = function() {
            const savedToken = localStorage.getItem('token');
            if (savedToken) {
                authToken = savedToken;
                document.getElementById('email').value = 'admin@vehiclesecure.com';
                document.getElementById('password').value = 'admin123';
            }
        };
    </script>
</body>
</html>